<template>
  <view class="content">
<!--    <image class="logo" src="@/static/logo.png"></image>-->
<!--    <view class="text-area">-->
<!--      <text class="title">Hello RuoYi</text>-->
<!--    </view>-->
    <view class="button-row">
      <view v-for="(item, index) in buttons" :key="index" class="button-item" @click="onButtonClick(item)">
        {{ item }}
      </view>
    </view>

    <view v-if="selectOneList">
      <detail v-if="selectOneList === '我的'" />
      <animation v-if="selectOneList === '动漫'" />
      <caricature v-else-if="selectOneList === '漫画'" />
      <movie v-else-if="selectOneList === '电影'" />
      <book v-else-if="selectOneList === '书籍'" />
      <documentary v-else-if="selectOneList === '纪录片'" />
      <teleplay v-else-if="selectOneList === '电视剧'" />
    </view>
    <view v-else>
      <detail/>
    </view>

  </view>
</template>

<script>
import detail from '@/pages/index/detail/index.vue'
import animation from '@/pages/index/animation/index.vue'
import caricature from '@/pages/index/caricature/index.vue'
import movie from '@/pages/index/movie/index.vue'
import book from '@/pages/index/book/index.vue'
import documentary from '@/pages/index/documentary/index.vue'
import teleplay from '@/pages/index/teleplay/index.vue'




export default {
  components: {
    detail,
    animation,
    caricature,
    movie,
    book,
    documentary,
    teleplay
  },
  data(){
    return {
      buttons: ['我的', '动漫', '电视剧', '电影', '纪录片', '书籍', '漫画'],
      selectOneList:null,
    }
  },
  methods: {
    onButtonClick(item) {
      // 在这里处理按钮点击事件
      // console.log(`点击了${item}`);
      this.selectOneList = item; // 设置selectOneList为当前点击的项

    },

  },
  onLoad: function() {

    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .button-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .button-item {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 40px; /* 设置宽度 */
     /*height: 40px; 设置高度，确保按钮为正方形 */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 5px;
    box-sizing: border-box; /* 确保padding不会影响按钮的尺寸 */
  }

</style>
